.ModuleIndex {
  margin: 0;
  padding: 10px 20px 20px;

  .block {
    display: flex;
  }

  .block div {
    border-radius: 4px 4px;
  }

  .head {
    width: 100px;
    height: 77px;
    line-height: 72px;
    text-align: center;
    display: block;
    background-color: #e0e6f1;
    font-size: 14px;
    font-weight: bold;
  }

  .hline {
    height: 1px;
    border-bottom: 1px solid #5377b6;
    width: 60px;
    margin: 34px 10px;
    position: relative;

    .arrow {
      position: absolute;
      right: -6px;
      bottom: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent #5377b6 transparent transparent;
      transform: rotate(180deg);
    }
  }

  .two {
    display: flex;
  }

  .ddd {
    width: 60px;
    margin: 34px 10px;
  }

  .item {
    width: 100px;
    height: 68px;
    text-align: center;
    line-height: 20px;
    display: block;
    background: #eaf2ff;
    color: #5377b6;

    span:nth-child(1) {
      width: 30px;
      height: 30px;
      display: block;
      margin: 0 auto;
      margin-top: 5px;
    }

    svg {
      width: 30px;
      height: 30px;
      display: block;
      margin: 0 auto;
      margin-top: 5px;
    }
  }

  .item:hover {
    transition-duration: 0.3s;
    transition-property: box-shadow;
    background-color: #ffefe0;
    cursor: pointer;
  }

  .vline {
    width: 1px;
    border-left: 1px solid #5377b6;
    height: 40px;
    margin: 10px 50px;
    position: relative;

    .arrow {
      position: absolute;
      right: -4px;
      bottom: -6px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent #5377b6 transparent transparent;
      transform: rotate(-90deg);
    }
  }
}

// *,
// *::before,
// *::after {
//   box-sizing: content-box;
//   -webkit-box-sizing: content-box;
//   -moz-box-sizing: content-box;
// }

*:before,
*:after {
  pointer-events: none !important;
}
